import React from "react";
import style from './header.module.scss'
import { Carousel } from 'antd-mobile';
class Header extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            imgHeight: 176,
            flag:true
        }
        this.dotStyle = {
            'width':'20px',
            'height':'20px',
            'borderRadius': '50%',
            'background': '#fff',
            'marginLeft':'10px',
        }
        this.activeStyle = {
            'width':'20px',
            'height':'20px',
            'borderRadius': '50%',
            'background': '#1989fa',
            'marginLeft':'10px',
        }
    }
    render() {
        return (
            <div className={style.header}>
                <div className={style.banner}>
                    {this.props.banners.length!==0&&<Carousel
                        autoplay
                        infinite
                        autoplayInterval = {2000}
                        dotStyle={this.dotStyle}
                        dotActiveStyle={this.activeStyle}
                    >
                        {this.props.banners.map((val) => (
                            <img
                                key={val.id}
                                src={val.thumb}
                                onLoad={() => {
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        ))}
                    </Carousel>}
                </div>
                {(this.props.showActiveStyle===2)||<div className={style.list}>
                    <div className={style.item}>
                        <h3>小初增值</h3>
                    </div>
                    <div className={style.item}>
                        <h3>初中微课</h3>
                    </div>
                </div>}
            </div>
        );
    }
}
export default Header